<template>
  <div class="border13">
    <svg :width="w" :height="h">
      <polygon
          :fill="backgroundColor"
          :points="`
        7, 7 ${w - 7}, 7 ${w - 7}, ${h - 7} 7, ${h - 7}
      `"
      />

      <polyline
          :stroke="colors[0]"
          :points="`2, 2 ${w - 2} ,2 ${w - 2}, ${h - 2} 2, ${h - 2} 2, 2`"
      />
      <polyline
          :stroke="colors[1]"
          :points="`6, 6 ${w - 6}, 6 ${w - 6}, ${h - 6} 6, ${h - 6} 6, 6`"
      />
      <circle :fill="colors[0]" cx="11" cy="11" r="1" />
      <circle :fill="colors[0]" :cx="w - 11" cy="11" r="1" />
      <circle :fill="colors[0]" :cx="w - 11" :cy="h - 11" r="1" />
      <circle :fill="colors[0]" cx="11" :cy="h - 11" r="1" />
    </svg>
  </div>
</template>
<script>

export default {
  name: 'border13',
  cnName: '边框-13',
  props: {
    width: Number,
    height: Number,
    option: Object
  },
  data() {
    return {}
  },
  methods: {},
  computed: {
    w() {
      return this.width
    },
    h() {
      return this.height
    },
    colors() {
      return this.option.attribute.colors
    },
    backgroundColor() {
      return this.option.attribute.bgColor
    }
  }
}
</script>

<style lang="less" scoped>
.border13 {
  polyline {
    fill: none;
  }
}
</style>
